<template>
    <div>
        {{ sum }}
    </div>
    <button @click="sum++">sum++</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
export default {
    name: 'Demo',
    setup() {
        console.log('====================================');
        console.log('setup');
        console.log('====================================');
        let sum = ref(0);

        // 通过组合式API使用生命周期
        onBeforeMount(() => {
            console.log('onBeforeMount');
        })
        onMounted(() => {
            console.log('onMounted');
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate');
        })
        onUpdated(() => {
            console.log('onUpdated');
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount');
        })
        onUnmounted(() => {
            console.log('onUnmounted');
        })

        return {
            sum
        }
    },
    // 通过配置方式使用生命周期
    // beforeCreate() {
    //     console.log('beforeCreate')
    // },
    // created() {
    //     console.log('created')
    // },
    // beforeMount() {
    //     console.log('beforeMount')
    // },
    // mounted() {
    //     console.log('mounted')
    // },
    // beforeUpdate() {
    //     console.log('beforeUpdate')
    // },
    // updated() {
    //     console.log('updated')
    // },
    // beforeUnmount() {
    //     console.log('beforeUnmount')
    // },
    // unmounted() {
    //     console.log('unmounted')
    // }
}
</script>